import React from 'react';
import { useDraggable } from '@dnd-kit/core';
import Draggable from '../Draggable';

interface DraggableItemProps {
  id: string | number;
  label: string;
  handle?: boolean;
  style?: React.CSSProperties;
  buttonStyle?: React.CSSProperties;
  top?: number;
  left?: number;
  showElement?: React.ReactNode | string;
  draggableData?: Record<string, any>;
}

function DraggableItem({
  id,
  label,
  style,
  top,
  left,
  handle,
  buttonStyle,
  showElement,
  draggableData,
}: DraggableItemProps) {
  console.log('DraggableItem', id);
  const { attributes, isDragging, listeners, setNodeRef, transform } = useDraggable({
    id: id,
    data: draggableData,
  });

  return (
    <Draggable
      ref={setNodeRef}
      dragging={isDragging}
      handle={handle}
      label={label}
      listeners={listeners}
      style={{ ...style, top, left }}
      buttonStyle={buttonStyle}
      // 元素被拖动时的位置坐标（相对浏览器窗口不包含滚动条）
      transform={transform}
      showElement={showElement}
      {...attributes}
    />
  );
}

export default DraggableItem;
